<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-row>
      <el-col :span="13"><h1 style="float: right;font-family: 仿宋,serif">全部医生</h1></el-col>
      <el-col :span="11">
        <div style="float: right">
          <el-input placeholder="请输入医生姓名" v-model="inputText" style="margin-top: 16px;width: 150px"/>
          <el-button class="c1" @click="submit()">提交</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in arr">
        <el-card class="modeCard">
          <img :src="BASE_URL+item.imgUrl" alt="医生头像" height="120" width="100">
          <p class="information-title">{{
              item.nickname
            }}医生</p>
          <p style="font-size: 15px" class="information-title">
            {{ item.duties }}</p>
          <el-button style="background-color: #FBC115;color: white;margin-top: 20px" plain @click="selectByDoctorId(item.id)">
            详细
          </el-button>
          <el-button v-if="userToken!=null" style="margin-left: 50px;background-color: #2EAFD6;color: white;margin-top: 20px" @click="router.push('/patient/newAppointment?id='+item.id)">预约</el-button>
          <el-button v-else plain style="margin-left: 50px;background-color: #2EAFD6;color: white;margin-top: 20px" @click="dialogVisible = true">
            预约
          </el-button>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
        v-model="dialogVisible"
        title="医生预约"
        width="500"
    >
      <span>没有查询到您的账户信息,请先登录</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">返回</el-button>
          <el-button type="primary" @click="router.push('/patient/login')">
            登录
          </el-button>
        </div>
      </template>

    </el-dialog>
    <el-dialog v-model="dialogTableVisible" title="医生详情" width="600">
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生头像:</el-col>
        <el-col :span="12"><img :src="BASE_URL+doctor.imgUrl" alt="医生头像" height="120" width="100"></el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生姓名:</el-col>
        <el-col :span="12">{{doctor.nickname}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生电话:</el-col>
        <el-col :span="12">{{doctor.mobile}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生职务:</el-col>
        <el-col :span="12">{{doctor.duties}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生简介:</el-col>
        <el-col :span="12">{{doctor.profiles}}</el-col>
      </el-row>

    </el-dialog>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";

const userToken = localStorage.getItem("user-token") ? JSON.parse(localStorage.getItem("user-token")) : null;
const userId = localStorage.getItem("user-id") ? JSON.parse(localStorage.getItem("user-id")):null;

const doctor = ref({})
const selectByDoctorId=(id)=>{
  dialogTableVisible.value = true
  axios.get(BASE_URL+"/v1/doctors/"+id+"/select").then((response)=>{
    if (response.data.code===20000){
      doctor.value = response.data.data;
    }else ElMessage.error(response.data.message)
  })
}

const arr = ref([])
onMounted(()=>{
  getDoctor();
})

const getDoctor=()=>{
  axios.get(BASE_URL+"/v1/doctors/select/pageNum=1").then((response) => {
    if (response.data.code===20000){
      arr.value=response.data.data.list;
    }else ElMessage.error(response.data.message)
  })
}

const dialogVisible = ref(false)
const dialogTableVisible = ref(false)

const inputText = ref('')
const submit =()=>{
  if (inputText.value==null||inputText.value===''){
    ElMessage.error("请输入医生姓名!");
    getDoctor();
    return;
  }
  axios.get(BASE_URL+"/v1/doctors/selectByNickname/"+inputText.value).then((response)=>{
    if (response.data.code===20000){
      arr.value = response.data.data;
    }else ElMessage.error(response.data.message)
  })
}
</script>

<style scoped>

.c1 {
  margin-top: 16px;
  background-color: #EFF0F0;
}

.c1:hover {
  color: white;
  background-color: #666666;
}

.information-title {
  font-family: 仿宋, serif;
  font-weight: bold;
  margin: 0;
  font-size: 18px;
  cursor: pointer; /*鼠标悬停变小手*/
}

.modeCard {
  margin-top: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.5s;
}

.modeCard:hover {
  transition: 0.5s;
  transform: scale(1.1);
}
</style>